<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="../tempresources/vue.js"></script>-->
<!--    <script src="../tempresources/axios.js"></script>-->
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<style>
    #app1{
        width: 100%;
        height: 100px;
        background-color: darkslateblue;
    }
    #app2{
        width: 389px;
        height: 800px;
        float: left;
        background-color: dimgrey;
        border: 1px;
    }
    #app3{
        width: 1500px;
        height: 800px;
        float: right;
        border: 1px;
        /*background-color: aqua;*/
     }
    .btn{
        background-color: dimgrey;
        height: 80px;
        width: 100%;
    }
    table{
        width: 100%;
        float: left;
    }
    .edit1{
        background-color: darkturquoise;
        width:110px;
    }
    .edit2{
        background-color: red;
        width: 110px;
    }
    /*.logout{*/
    /*    float: right;*/
    /*}*/

</style>
<body>
<div id="app">
    <div id="app1">
        <h1>
            <span>{{empoyee.realname}}</span>
            <span style="float: right" @click="logout(empoyee)">退出</span>
            <span style="float: right" @click="updateempoyee(empoyee)">修改&nbsp;&nbsp;</span>
        </h1>
    </div>

    <div id="app2">
        <button class="btn" @click="getempoyees()">员工查看</button>
        <button class="btn" @click="getbooks()">书籍查看</button>

        <button class="btn" v-show="JSON.stringify(empoyees)!='{}' && empoyee.name === 'root' " @click="addempoyee()">员工添加</button>
        <button class="btn" v-show="JSON.stringify(books)!='{}'" @click="addbook()">书籍添加</button>

        <h4 v-show="JSON.stringify(empoyees)!='{}'|| JSON.stringify(books)!='{}' ">搜索</h4>
        <input type="text" v-show="JSON.stringify(empoyees)!='{}'|| JSON.stringify(books)!='{}' " v-model="searchname" @keyup.enter="search()">

    </div>

    <div id="app3">

        <!--        书籍-->
        <h1 v-show="isedit">bookid:{{book.bookid}}</br></h1>
        <h1 v-show="isedit">name:<input v-model="book.bookname"></br></h1>
        <h1 v-show="isedit">number:<input v-model="book.number"></br></h1>
        <button v-show="isedit" @click="changebook(book)">提交</button>

        <!--        员工-->
        <h1 v-show="isedem">id:{{empoyee2.id}}</br></h1>
        <h1 v-show="isedem">name:<input v-model="empoyee2.name"></br></h1>
        <h1 v-show="isedem">realname:<input v-model="empoyee2.realname"></br></h1>
        <h1 v-show="isedem">password:<input v-model="empoyee2.password"></br></h1>
        <h1 v-show="isedem">age:<input v-model="empoyee2.age"></br></h1>
        <button v-show="isedem" @click="changeempoyee(empoyee2)">提交</button>


        <table border="1px">
        <tr v-show="JSON.stringify(books)!='{}'">
<!--            如不为空，显示-->
            <th>id</th>
            <th>书籍</th>
            <th>数量</th>
            <th>剩余数量</th>
        </tr>
        <tr v-show="JSON.stringify(empoyees)!='{}'">
<!--            如不为空，显示-->
            <th>账号</th>
            <th>名称</th>
            <th v-show="JSON.stringify(empoyees)!='{}' && empoyee.name === 'root' ">密码</th>
            <th>年龄</th>
        </tr>
        <tr v-for="book in books">
            <td>{{book.bookid}}</td>
            <td>{{book.bookname}}</td>
            <td>{{book.number}}</td>
            <td>{{book.haiyou}}</td>
            <td class="edit1" @click="updatebook(book)">修改数量</td>
            <td class="edit2" @click="delectbook(book)">删除本书</td>
        </tr>
        <tr v-for="empoye in empoyees">
            <td>{{empoye.name}}</td>
            <td>{{empoye.realname}}</td>
            <td v-show="JSON.stringify(empoyees)!='{}' && empoyee.name === 'root' ">{{empoye.password}}</td>
            <td>{{empoye.age}}</td>
            <td class="edit1" @click="updateempoyee(empoye)" v-show="JSON.stringify(empoyees)!='{}' && empoyee.name === 'root' ">修改信息</td>
            <td class="edit2" @click="delectempoyee(empoye)" v-show="JSON.stringify(empoyees)!='{}' && empoyee.name === 'root' ">删除员工</td>
        </tr>
    </table>
    </div>

</div>
</body>

<script>
    var bookisenogth
    new Vue({
        el:'#app',
        data:{
            empoyee:{},
            empoyees:{},
            empoyee2:{},
            books:{},
            book:{},
            isedit:false,//是否显示书籍修改
            isedem:false,//是否显示员工修改
            searchname:''//搜索内容

        },
        mounted:function (){
            const empoyee = window.localStorage.getItem('empoyee')
            if (empoyee) {
                this.empoyee = JSON.parse(empoyee)
            }//接受login数据
        },
        methods:{
            logout(empoyee){
                const data=empoyee
                localStorage.removeItem('empoyee')
                axios({
                        url:"/empoyee/logout",
                        method:"post",
                        data:data
                    }
                ).then(function (res){
                    }
                )
                location.reload()
            },
            getbooks(){
                this.empoyees={}//置空
                this.isedit=false
                this.isedem=false
                // xianshi=!xianshi
                let _this=this
                axios({
                        url:"/book/getallbook",
                        method:"post",
                    }
                ).then(function (res){
                        _this.books=res.data.data
                    }
                )
            },
            getempoyees(){
                this.books={}//置空
                this.isedit=false
                this.isedem=false
                // xianshi=!xianshi
                let _this=this
                axios({
                        url:"/empoyee/getallempoyee",
                        method:"post",
                    }
                ).then(function (res){
                        _this.empoyees=res.data.data
                    }
                )
            },
            delectbook(book){
                if(book.number !== book.haiyou) {
                    alert('还有人借了这书，不能下架')
                    return
                }
                const data=book
                axios({
                        url:"/book/deletebook",
                        method:"post",
                        data: data
                    }
                ).then(function (res){
                        if (res.data.code==1)alert(res.data.data);
                        else alert(res.data.msg);
                    }
                )
                location.reload()//刷新页面
            },
            addbook(){
                this.isedit=true
                this.book={
                    bookid:-1//表示是新增
                }
                this.books={}
            },
            updatebook(book){
                this.book=book
                this.books={}
                bookisenogth=book.number
                this.isedit=true
            },
            changebook(book){
                if(book.number<bookisenogth-book.haiyou) {
                    alert('不应该比借出去的数量还少')
                    return
                }
                const date=book
                axios({
                        url:"/book/updatebook",
                        method:"post",
                        data: date
                    }
                ).then(function (res){
                    if (res.data.code==1)alert(res.data.data);
                    else alert(res.data.msg);
                    }
                )
                location.reload()//刷新页面
            },
            addempoyee(){
                this.isedem=true
                this.empoyee2={}
                this.empoyees={}
            },
            updateempoyee(empoye){
                this.empoyee2=empoye
                this.empoyees={}
                this.books={}
                this.isedem=true
            },
            delectempoyee(empoye){
                const data=empoye
                axios({
                        url:"/empoyee/deleteempoyee",
                        method:"post",
                        data: data
                    }
                ).then(function (res){
                        if (res.data.code==1)alert(res.data.data);
                    }
                )
                location.reload()//刷新页面
            },
            changeempoyee(empoyee2){
                const date=empoyee2
                axios({
                        url:"/empoyee/updateempoyee",
                        method:"post",
                        data: date
                    }
                ).then(function (res){
                        if (res.data.code==1)alert(res.data.data);
                    }
                )
                if(empoyee2.name === this.empoyee.name){
                    localStorage.removeItem('empoyee')
                    this.empoyee.realname=empoyee2.realname
                    localStorage.setItem('empoyee',JSON.stringify(this.empoyee))//保存信息
                }
                location.reload()//刷新页面
            },
            search(){
                if(JSON.stringify(this.empoyees)!=='{}' ){
                    this.searchempoyee()
                }
                if (JSON.stringify(this.books)!=='{}' ){
                    this.searchbook()
                }
            },
            searchempoyee(){
                this.empoyee2={realname:this.searchname}
                const date=this.empoyee2
                const _this=this
                axios({
                        url:"/empoyee/search",
                        method:"post",
                        data: date
                    }
                ).then(function (res){
                        if (res.data.code==1)
                            _this.empoyees=res.data.data
                    }
                )
            },
            searchbook(){
                this.book={bookname:this.searchname}
                const date=this.book
                const _this=this
                axios({
                        url:"/book/search",
                        method:"post",
                        data: date
                    }
                ).then(function (res){
                        if (res.data.code==1)
                            _this.books=res.data.data
                    }
                )
            },
        }
    })
</script>
</html>